<template>
  <n-grid cols="1 400:1 600:2" x-gap="12" y-gap="12">
    <n-gi span="1">
      <n-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-placement="left"
        :label-width="100"
      >
        <n-form-item label="姓名" path="name">
          <n-input v-model:value="formData.name" disabled />
        </n-form-item>
        <n-form-item label="昵称" path="nickname">
          <n-input v-model:value="formData.nickname" />
        </n-form-item>
        <n-form-item label="联系电话" path="phone">
          <n-input v-model:value="formData.phone" />
        </n-form-item>
        <n-form-item label="联系邮箱" path="email">
          <n-input v-model:value="formData.email" />
        </n-form-item>
        <n-form-item label="个人简介" path="signature">
          <n-input v-model:value="formData.signature" type="textarea" />
        </n-form-item>
        <n-form-item label="所在地区" path="area">
          <n-input v-model:value="formData.area" type="textarea" />
        </n-form-item>
        <n-form-item label=" " path="submit">
          <n-button type="info" :loading="loading" @click="updateBasicInfo">
            更新基本信息
          </n-button>
        </n-form-item>
      </n-form>
    </n-gi>
    <n-gi span="1">
      <n-form-item
        label="头像"
        path="perms"
        :label-width="100"
        label-placement="left"
      >
        <n-space vertical justify="center" align="center">
          <n-avatar round :size="200" :src="authStore.userInfo?.avatarUrl" />
          <n-button @click="showCropper">更换头像</n-button>
        </n-space>
      </n-form-item>
    </n-gi>
  </n-grid>
  <cropper-modal
    title="修改头像"
    circled
    :loading="cropperLoading"
    v-model:show="cropperVisible"
    @positive-click="updateAvatar"
  />
</template>

<script lang="ts" setup>
import { useAuthStore } from "@/store";
import { useBoolean, useLoadingFunc } from "@/hooks";
import { sysUserApi } from "@/api";
import { FormInst } from "naive-ui";
import {
  requiredRule,
  rangeCountRule,
  phoneRule,
  emailRule,
  cloneDeep,
} from "@/utils";

const rules = {
  nickname: [requiredRule(), rangeCountRule(2, 18)],
  phone: phoneRule(),
  email: emailRule(),
};

const authStore = useAuthStore();
const formRef = ref<FormInst>();
const formData = ref<User>(cloneDeep(authStore.userInfo) || {});
const {
  bool: cropperVisible,
  setTrue: showCropper,
  setFalse: hideCropper,
} = useBoolean();

const { loading, func: updateBasicInfo } = useLoadingFunc(async () => {
  await formRef.value?.validate();
  await sysUserApi.updateBasic(formData.value);
  window.$message?.success("修改成功");
  authStore.setUserInfo(formData.value);
});

const cropperLoading = ref(false);
const updateAvatar = async (content: { file: Blob; filename: string }) => {
  cropperLoading.value = true;
  try {
    let file = content.file;
    const data = new FormData();
    data.append("file", file);
    const { data: avatarUrl } = await sysUserApi.updateAvatar(data);
    authStore.setUserInfo({ avatarUrl });
    hideCropper();
  } finally {
    cropperLoading.value = false;
  }
};
</script>

<style scoped></style>
